<template>
	<scroll-view scroll-y class="" style="background: #F8F4EE;"
		:style="{background:'url('+Imgbase+'/brave_goodpoor_bgc.png)','background-size':'100%',}">


		<view class="padding-top-65 padding-left-40">
			<image class="w-80 h-80" :src="Imgbase + '/brave_goodindex_img1.png'" mode="aspectFit" @click="back">
			</image>

			<image class="w-160 h-80 padding-left-30" :src="Imgbase + '/new_goodbox_img1.png'" mode="aspectFit">
			</image>


		</view>

		<view v-if="desc" style="position: relative;width: 100%;margin-top: 10upx;min-height: 1300upx;z-index: 999;">
			<view class="" style="width: 95%;height: 230rpx; margin: 20rpx auto 0;"
				:style="{background:'url('+Imgbase+'/new_goodbox_img2.png)','background-size':'100% 100%',}">
				<!-- <scroll-view scroll-x class=" nav" style="width: 92%;margin-left: 4%;box-shadow:3px 3px 3px 0px #e5c757;border-radius: 15upx;"> -->
				<view class="Afont font-weight-500"
					style="text-align: center;padding-top: 30rpx;width: 92%;margin: 0 auto;color: #8E4E0D;">
					<view class="" v-if="both_thow == 0">
						<text>
							个人连续 <text v-if="both_thow ==1">{{num}}</text> <text v-if="both_thow == 0">{{num2}}</text>抽，
						</text>
						<span v-if="open_custom_box == 0">
							不出SSS、SSR、SR赏级的赏品
						</span>
						<span v-if="open_custom_box == 1">
							不出 {{open_custom_box_mes}}赏级的赏品
						</span>
						<!-- <span v-if="open_custom_box == 1">
							不出<text v-if="both_thow == 0">{{open_custom_box_mes2}}</text>赏级的赏品
						</span> -->
						<view>
							则进行一次<text v-if="both_thow == 1">BOX</text> <text v-if="both_thow == 0">MBOX</text>赏抽取
						</view>
					</view>

					<view class="" v-if="both_thow == 1">
						<text>
							个人连续 <text v-if="both_thow ==1">{{num}}</text> <text v-if="both_thow == 0">{{num2}}</text>抽，
						</text>
						<span v-if="open_custom_box2 == 0">
							不出SSS、SSR、SR赏级的赏品
						</span>
						<span v-if="open_custom_box2 == 1">
							不出 {{open_custom_box_mes2}}赏级的赏品
						</span>

						<view>
							则进行一次<text v-if="both_thow == 1">BOX</text> <text v-if="both_thow == 0">MBOX</text>赏抽取
						</view>
					</view>
				</view>
			</view>


			<view class="radius-20" style="padding-top: 50rpx;z-index: 999;width: 96%;margin: -20rpx auto 0;"
				:style="{background:'url('+Imgbase+'/new_goodbox_img3.png)','background-size':'100% 100%',}">

				<view class="both_two" v-if="desc2 != 1 && desc != 1">
					<view class="two_item" @click="both_thowbtn(0)" style="position: relative; z-index: 999;">
						<image v-if="both_thow == 0" :src="Imgbase + '/new_goodbox_img4_c.png'" mode="aspectFit">
						</image>
						<image v-if="both_thow == 1" :src="Imgbase + '/new_goodbox_img4.png'" mode="aspectFit">
						</image>
					</view>
					<view class="two_item" @click="both_thowbtn(1)" style="position: relative; z-index: 999;">
						<image v-if="both_thow == 0" :src="Imgbase + '/new_goodbox_img5.png'" mode="aspectFit">
						</image>
						<image v-if="both_thow == 1" :src="Imgbase + '/new_goodbox_img5_c.png'" mode="aspectFit">
						</image>
					</view>
				</view>
				<!-- box -->
				<view class="both_two_s" v-if="desc == 1">
					<image :src="Imgbase + '/kp_boxde_tab2_c.png'" mode="aspectFit">
					</image>
				</view>
				<!-- mbox -->
				<view class="both_two_s" v-if="desc2 == 1">
					<image :src="Imgbase + '/kp_boxde_tab1_c.png'" mode="aspectFit">
					</image>
				</view>

				<!-- MBOX赏 -->
				<view class="" v-if="both_thow == 0"
					style="position: relative;  min-height: 1000rpx;width: 100%; margin: 0 auto;padding-top: 20rpx;padding-left: 25rpx;">
					<view class="cu-card  light" style="position: relative;
				width: 100%;margin-left: 0%;margin-top: 10upx;" v-for="(item,index) in desc2.extroinfo">
						<view class="padding-left padding-tb-xs df alc" style="height: 55upx;">
							<view class="">
								<image :src="Imgbase + '/new_good_ssr.png'" class="w-200 h-50" mode="aspectFit"
									v-if="item.reword_type_id == 49"></image>
								<image :src="Imgbase + '/new_good_sr.png'" class="w-200 h-50" mode="aspectFit"
									v-if="item.reword_type_id == 51"></image>
								<image :src="Imgbase + '/new1_infinite_SD.png'" style="width: 90upx;height: 45upx;"
									mode="aspectFit" v-if="item.reword_type_id == 30"></image>
								<image :src="Imgbase + '/new_good_r.png'" class="w-200 h-50" mode="aspectFit"
									v-if="item.reword_type_id == 52"></image>
								<image :src="Imgbase + '/new_good_n.png'" class="w-200 h-50" mode="aspectFit"
									v-if="item.reword_type_id == 53"></image>
								<image :src="Imgbase + '/new1_infinite_M.png'" style="width: 70upx;height: 45upx;"
									mode="aspectFit" v-if="item.reword_type_id == 16"></image>
								<image :src="Imgbase + '/new_good_sss.png'" class="w-200 h-50" mode="aspectFit"
									v-if="item.reword_type_id == 50"></image>
							</view>
							<view class=" padding-left-sm Afont" style="line-height: 50upx;color: #8E4E0D;">
								共{{item.goodinfo.length}}种 获取概率{{Number(item.point/desc.point*100).toFixed(3)}}%</view>
						</view>
						<view class="item_d" v-for="(gooditem,goodindex) in item.goodinfo" style="width: 30%;margin-bottom: 10upx;padding: 5upx 5upx;
							height: 290upx;" :style="{background:'url('+Imgbase+'/kp_gr_kuang.png)','background-size':'100% 100%',}">
							<image class="radius-15 w100 h-195" :src="gooditem.goodmes.adimage" mode="aspectFit">
							</image>
							<view class="fff font-24 margin-top-10"
								style="max-width: 250upx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding: 0 8rpx;font-weight: bold;">
								{{gooditem.goodmes.name}}
							</view>
							<view class="fff font-20 margin-top-10" style="padding: 0 8rpx;color: #DEA345; ">
								获取概率: {{Number(gooditem.point/desc.point*100).toFixed(3)}}%
							</view>
						</view>

					</view>

					<view style="clear: both;"></view>
				</view>
				<!-- BOX赏 -->
				<view class="" v-if="both_thow == 1"
					style="position: relative;  min-height: 1000rpx;width: 100%; margin: 0 auto;padding-top: 20rpx;padding-left: 25rpx;">
					<view class="cu-card article light" style="position: relative;
				width: 100%;margin-left: 0%;margin-top: 10upx;" v-for="(item,index) in desc.extroinfo">
						<view class="padding-left padding-tb-xs df alc" style="height: 55upx;">
							<view class="">
								<image :src="Imgbase + '/new_good_ssr.png'" class="w-200 h-50" mode="aspectFit"
									v-if="item.reword_type_id == 49"></image>
								<image :src="Imgbase + '/new_good_sr.png'" class="w-200 h-50" mode="aspectFit"
									v-if="item.reword_type_id == 51"></image>
								<image :src="Imgbase + '/new1_infinite_SD.png'" style="width: 90upx;height: 45upx;"
									mode="aspectFit" v-if="item.reword_type_id == 30"></image>
								<image :src="Imgbase + '/new_good_r.png'" class="w-200 h-50" mode="aspectFit"
									v-if="item.reword_type_id == 52"></image>
								<image :src="Imgbase + '/new_good_n.png'" class="w-200 h-50" mode="aspectFit"
									v-if="item.reword_type_id == 53"></image>
								<image :src="Imgbase + '/new1_infinite_M.png'" style="width: 70upx;height: 45upx;"
									mode="aspectFit" v-if="item.reword_type_id == 16"></image>
								<image :src="Imgbase + '/new_good_sss.png'" class="w-200 h-50" mode="aspectFit"
									v-if="item.reword_type_id == 50"></image>
							</view>
							<text class=" padding-left-sm Afont" style="line-height: 50upx;color: #8E4E0D;">
								共{{item.goodinfo.length}}种 获取概率{{Number(item.point/desc.point*100).toFixed(3)}}%</text>
						</view>
						<view class="item_d" v-for="(gooditem,goodindex) in item.goodinfo" style="width: 30%;margin-bottom: 10upx;padding: 5upx 5upx;
							height: 290upx;" :style="{background:'url('+Imgbase+'/kp_gr_kuang.png)','background-size':'100% 100%',}">
							<image class="radius-15 w100 h-195" :src="gooditem.goodmes.adimage" mode="aspectFit">
							</image>
							<view class="fff font-24 margin-top-10"
								style="max-width: 250upx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding: 0 8rpx;font-weight: bold;">
								{{gooditem.goodmes.name}}
							</view>
							<view class="fff font-20 margin-top-10" style="padding: 0 8rpx;color: #DEA345; ">
								获取概率: {{Number(gooditem.point/desc.point*100).toFixed(3)}}%
							</view>
						</view>
					</view>
					<view style="clear: both;"></view>
				</view>


			</view>


			<view style="clear: both;"></view>
		</view>
		<view style="clear: both;"></view>
		<view style="width: 100%;height: 180upx;"></view>
		<view class="cu-load load-modal" v-if="loadModal">
			<image src="/static/icon.jpg" mode="aspectFit"></image>
			<view class="gray-text">加载中...</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				Imgbase: getApp().globalData.Imgbase,
				desc: [],
				desc2: [],
				id: null,
				title: '抽赏',
				page: 1,
				count: 10,
				modalName: null,
				did: 0,
				loadModal: false,
				round: 0,
				num: 0,
				open_custom_box: 0,
				open_custom_box_mes: '',
				num2: 0,
				open_custom_box2: 0,
				open_custom_box_mes2: '',
				mes_text: '',
				mes_text_show: '',
				timer: null,
				both_thow: 0
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			both_thowbtn(i) {
				this.both_thow = i
			},
			setData() {
				let _this = this;
				let i = 0;
				this.timer = setInterval(function() {
					if (i < _this.mes_text.length) {
						_this.mes_text_show = _this.mes_text.slice(0, i++)
					} else {
						_this.mes_text_show = _this.mes_text
						clearTimeout(_this.timer);
						_this.timer = null;
					}
				}, 70)
			},
			hideModal(e) {
				this.modalName = null
			},
			loadDesc(id) {
				let _this = this;
				_this.page = 1;
				_this.loadModal = true;
				uni.request({
					url: _this.$globals.apibase + '/api/Infinite/boxdesc',
					data: {
						token: uni.getStorageSync('token'),
						id: id,
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						if (res.data.code == '401') {
							uni.setStorageSync('token', '');
						}
						if (res.data.code == '1') {
							if (res.data.data.desc != null) {
								_this.both_thow = 1
								_this.desc = res.data.data.desc.box_mes;
								_this.title = res.data.data.desc.box_mes.name;
							} else {
								_this.desc = 1
							}
						}
						if (res.data.code == '0') {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
						_this.loadModal = false;
					}
				});
			},
			loadDesc2(id) {
				let _this = this;
				_this.page = 1;
				_this.loadModal = true;
				uni.request({
					url: _this.$globals.apibase + '/api/Infinite/boxdesc2',
					data: {
						token: uni.getStorageSync('token'),
						id: id,
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						if (res.data.code == '401') {
							uni.setStorageSync('token', '');
						}
						if (res.data.code == '1') {
							console.log(res.data.data.desc)
							if (res.data.data.desc != null) {
								_this.both_thow = 0
								_this.desc2 = res.data.data.desc.box_mes2;
							} else {
								_this.desc2 = 1
							}
						}
						if (res.data.code == '0') {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
						_this.loadModal = false;
					}
				});
			},
		},
		onUnload() {},
		onShow() {},
		onLoad(options) {
			console.log(options)
			let _this = this;
			this.did = options.id;
			this.num = options.num;
			this.open_custom_box = options.open_custom_box;
			this.open_custom_box_mes = options.open_custom_box_mes;
			this.num2 = options.num2;
			this.open_custom_box2 = options.open_custom_box2;
			this.open_custom_box_mes2 = options.open_custom_box_mes2;
			this.loadDesc(this.did);
			this.loadDesc2(this.did);
			this.mes_text += '个人连续';
			this.mes_text += this.num;
			this.mes_text += '抽,'
			console.log(this.open_custom_box);
			if (this.open_custom_box == 'undefined' || this.open_custom_box == 0) {
				this.mes_text += '不出SSS、SSR、SR赏级的赏品'
			}
			if (this.open_custom_box == 1) {
				this.mes_text += '不出';
				this.mes_text += this.open_custom_box_mes;
				this.mes_text += '赏级的赏品,'
			}
			this.mes_text += '则进行一次BOX赏抽取';
			this.setData();
		},
		onUnload() {
			if (this.timer) {
				clearTimeout(this.timer);
				this.timer = null;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.item_d {
		float: left;
		margin-right: 24rpx;
	}



	button::after {
		border: initial;
	}

	.fl {
		float: left;
	}

	.fr {
		float: right;
	}

	.refresh_icon {
		height: 80upx;
		width: 80upx;
	}

	.both_two {
		display: flex;
		align-items: center;
		justify-content: space-around;

		image {
			width: 100%;
			height: 100%;
		}

		.two_item {
			width: 330rpx;
			height: 90rpx;
		}
	}

	.both_two_s {
		width: 380rpx;
		height: 100rpx;
		margin: 0 auto 0;
		padding-right: 20rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>